<template>
  <v-chart className="chart" :option="option" autoresize />
</template>

<script setup>
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { BarChart } from 'echarts/charts';
  import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';
  import {ref, toRef} from 'vue';

  use([
    CanvasRenderer,
    BarChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
  ]);

  const defProp = defineProps({
    name: {
      type: String,
      default: 'barPie'
    },
    xData: {
      type: Array
    },
    yData: {
      type: Array
    }
  });
  const name = toRef(defProp, 'name');
  const xData = toRef(defProp, 'xData');
  const yData = toRef(defProp, 'yData');

  const option = ref({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} 人次'
    },
    xAxis: {
      type: 'category',
      data: xData
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: name,
        data: yData,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  });
</script>
